import React, { Component, createRef } from 'react'

/**
 * - 受控组件是通过 React 组件的状态来控制表单元素的值
 * - 非受控组件是通过手动操作 DOM 的方式来控制
 * - 此时，需要用到一个新的概念：ref
 * - ref：用来在 React 中获取 DOM 元素
 */

class Child extends Component {
  render() {
    return (
      <div>
        <h2>子组件</h2>
      </div>
    )
  }
}
class App extends Component {
  // 1.创建ref对象
  input = createRef()

  child = createRef()
  // 获取
  getInput = () => {
    console.log('inputDom 对象', this.input.current.value)
  }
  getChild = () => {
    console.log('子组件实例', this.child)
  }
  render() {
    return (
      <div>
        <h1>非受控组件(ref)</h1>
        <input ref={this.input} type="text" name="" id="" />
        <button onClick={this.getInput}>获取input元素的dom对象</button>
        <hr />
        <Child ref={this.child}></Child>
        <button onClick={this.getChild}>获取子组件实例</button>
      </div>
    )
  }
}

export default App
